<template>
  <!-----------------订单------------------>
  <view class="all">
    <hea :title="title"></hea>
    <div
      style="
        width: 100%;
        height: 100px;
        background-color: white;
        margin-top: 2px;
      "
    >
      <text style="font-size: 22px; padding: 15px; color: grey">产品 </text>
      <text style="font-size: 16px; color: grey"> 积分+1</text>
      <div style="display: flex">
        <div
          :class="productcur == index ? 'pj2' : 'pj1'"
          v-for="(item, index) in data"
          @click="product(item, index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div
      style="
        width: 100%;
        height: 100px;
        background-color: white;
        margin-top: 2px;
      "
    >
      <text style="font-size: 22px; padding: 15px; color: grey" @click="service"
        >服务
      </text>
      <text style="font-size: 16px; color: grey"> 积分+1</text>
      <div style="display: flex">
        <div
          :class="servicecur == index ? 'pj2' : 'pj1'"
          v-for="(item, index) in data1"
          @click="service(item, index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div
      style="
        width: 100%;
        height: 200px;
        background-color: white;
        margin-top: 2px;
      "
    >
      <text style="font-size: 22px; padding: 15px; color: grey"
        >意见和建议</text
      >
      <text style="font-size: 16px; color: grey"> 积分+3</text>
      <u--input
      style="border: 0px;height: 40px;"
        placeholder="请针对产品和服务提出意见和建议，15子以上(可填选)"
        v-model="value"
        @change="change"

        
      ></u--input>
    </div>
  </view>
</template>
<script>
import hea from "../../components/hea.vue";
export default {
  components: {
    hea,
  },
  data() {
    return {
      title: "评价",
      data: ["满意", "一般", "不满意"],
      data1: ["满意", "一般", "不满意"],
      productcur: 0,
      servicecur: 0,
      value: "",
    };
  },
  methods: {
    product(it, ind) {
      console.log("产品" + it);
      this.productcur = ind;
    },
    service(it, ind) {
      console.log("服务" + it);
      this.servicecur = ind;
    },
    change(e){

    }
  },
  onShow() {},
};
</script>

<style scoped>
.all {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
}
.pj1 {
  width: 90px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: grey;
  border: 1px solid grey;
  margin-top: 15px;
  margin-left: 20px;
}
.pj2 {
  width: 90px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: orange;
  border: 1px solid orange;
  margin-top: 15px;
  margin-left: 20px;
}
</style>
